<template>
    <div class="warp-2" style="height: 100%;">
        <navbar :title="detailInfo.ilsTitle"></navbar>
        <div class="content content-warp" :style="{'padding-bottom': isOngoing ? '56px' : '0'}">
            <div class="info-warp">
                <h2>{{ $t('cos_detail_basic_information') }}</h2>
                <div class="base-info">
                    <label>
                        <div>{{ $t('Training_type')}}：</div>
                        <div>{{detailInfo.ilsTrainType ? $t('Practical_training') : $t('Theoretical_training')}}</div>
                    </label>
                    <label>
                        <div>{{ $t('Training_title')}}：</div>
                        <div>{{detailInfo.ilsTitle}}</div>
                    </label>
                    <label>
                        <div>{{ $t('Training_date')}}：</div>
                        <div>{{
                            detailInfo.ilsStartTime ? detailInfo.ilsStartTime.split(' ')[0] : '--'}}
                            ({{$moment(detailInfo.ilsStartTime).format('dddd')}})
                        </div>
                    </label>
                    <label>
                        <div>{{ $t('start_time')}}：</div>
                        <div>{{detailInfo.ilsStartTime ? detailInfo.ilsStartTime.split(' ')[1].substring(0, detailInfo.ilsStartTime.split(' ')[1].lastIndexOf(':')) : '--'}}</div>
                    </label>
                    <label>
                        <div>{{ $t('end_time')}}：</div>
                        <div>{{detailInfo.ilsEndTime ? detailInfo.ilsEndTime.split(' ')[1].substring(0, detailInfo.ilsStartTime.split(' ')[1].lastIndexOf(':')) : '--'}}</div>
                    </label>
                    <label>
                        <div>{{ $t('cos_train_address')}}：</div>
                        <div>{{detailInfo.ilsPlace || '--'}}</div>
                    </label>
                    <label>
                        <div>{{ $t('Training_instructor')}}：</div>
                        <div>{{detailInfo.instructorNameList || '--'}}</div>
                    </label>
                    <label>
                        <div>{{$t('training_methods')}}：</div>
                        <div>{{trainType(detailInfo.sstTrainingType)}}</div>
                    </label>
                    <label>
                        <div>{{ $t('teacher_ID')}}：</div>
                        <div :class="{color_orange: detailInfo.sstClaNum}">{{detailInfo.sstClaNum || $t('null')}}</div>
                    </label>
                    <label>
                        <div>{{$t('seat_number')}}：</div>
                        <div :class="{color_orange: detailInfo.sstNumber}">{{detailInfo.sstNumber || $t('null')}}</div>
                    </label>

                </div>
            </div>
            <!-- 签到记录 -->
            <div class="info-warp" v-if="isEnding">
                <h2>{{ $t('Attendance_ecord') }}</h2>
                <div class="base-info">
                    <label>
                        <div>{{ $t('sign_in_status')}}：</div>
                        <div :class="detailInfo.stuStatus !== 5 && detailInfo.stuStatus !==6 ? detailInfo.stuStatus === 1 ? 'color_green' : 'color_red' : ''">{{signStatus(detailInfo.stuStatus)}}</div>
                    </label>
                    <label>
                        <div>{{ $t('cos_check_in_time') }}：</div>
                        <div>{{detailInfo.checkInTime || '--'}}</div>
                    </label>
                </div>
            </div>
        </div>
        <div class="bottom-btns" v-if="isOngoing&&detailInfo.ilsLiveUrl">
            <!-- <div class="btn" v-if="detailInfo.sstTrainingType === 'PERSONAL'">PC端扫码验证</div> -->
            <!-- <div class="btn">扫码签到</div> -->
            <div class="btns" v-if="detailInfo.sstTrainingType === 'PERSONAL'">
                <div class="btn" @click="toBroadcast(detailInfo)">{{ $t('Enter_live_broadcast_room')}}</div>
            </div>
            <!-- <div class="btn" @click="scanninCode()" v-else>{{ $t('scan_code_sign_in')}}</div> -->
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
import { Toast } from 'vant';
export default {
    components: {
        CommonLoading,
        vanToast: Toast
    },
    data() {
        return {
            // visibleModal: false,
            BroadcastDta: null,
            isLoading: true,
            itmId: this.$route.params.itmId,
            id: this.$route.query.id,
            appStatus: this.$route.query.appStatus,
            detailInfo: {},
            isEnding: false,
            isOngoing: false
        };
    },
    methods: {
        trainType(val) {
            switch (val) {
            case 'VENUE':
                return this.$t('Centralized_training_venues');
            case 'PERSONAL':
                return this.$t('Personal_training');
            case 'SCENE':
                return this.$t('centralized_training');
            default:
                return this.$t('null');
            }
        },
        /**
         * 获取课程详情 */
        getDetail() {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/face/course/lessons-detail`,
                params: {
                    itmId: this.itmId,
                    ilsId: this.id
                }
            }).then((res) => {
                this.detailInfo = res.data;
                // 时间对比-当前时间大于结束时间-表示已结束
                const current = new Date().getTime();
                let endTime = new Date(res.data.ilsEndTime).getTime();
                let startTime = new Date(res.data.ilsStartTime).getTime() - 900000;
                if (res.data.ilsEndTime && current > endTime) {
                    this.isEnding = true;
                    this.isOngoing = false;
                    Toast(this.$t('live_broadcast_has_ended'));
                } else if (res.data.ilsEndTime && res.data.ilsStartTime && current >= startTime && current <= endTime) {
                    this.isOngoing = true;
                    this.isEnding = false;
                } else {
                    Toast(this.$t('live_broadcast_not_started'));
                    this.isEnding = false;
                    this.isOngoing = false;
                }
                this.isLoading = false;
            }).catch(() => {
                this.isLoading = false;
            });
        },
        // 直播间跳转
        toBroadcast(item) {
            this.BroadcastDta = item;
            // if (this.detailInfo.ilsScanNum > 0) {
            //     this.visibleModal = true;
            // } else {
            this.$router.push({path: `/certifiedCourse/faceBroadcast`, query: {BroadcastDta: JSON.stringify(this.BroadcastDta), appStatus: this.appStatus, itmId: this.itmId}});
            // }
        },
        signStatus(val) {
            switch (val) {
            case 1:
                return '【' + this.$t('cos_check_in_status_normal') + '】';
            case 2:
                return '【' + this.$t('cos_check_in_status_be_late') + '】';
            case 3:
                return '【' + this.$t('cos_check_in_status_absence') + '】';
            case 4:
                return '【' + this.$t('ask_leave') + '】';
            case 5:
                return '【' + this.$t('cos_app_not_started') + '】';
            case 6:
                return '【' + this.$t('no_sign') + '】';
            default:
                return '【' + this.$t('cos_app_not_started') + '】';
            }
        }
    },
    mounted() {
        this.getDetail();
    }
};
</script>

<style scoped lang="less">
    @import "./courseLess.less";
    .message-2{
        width: 45px;
        height: 56px;
        display: flex;
        justify-content: center;
        align-items: center;
        &:before{
            content: '';
            display: block;
            width: 21px;
            height: 21px;
            background: url(./images/bell.png) no-repeat 0 0;
            background-size: 20px;
        }
    }
    .dot{
        position: absolute;
        background: red;
        width: 8px;
        height: 8px;
        border: 1px solid #fff;
        border-radius: 50%;
        top: 15px;
        right: 13px;
    }
    .content-warp{
        padding: 56px 15px 0;
        overflow-y: scroll;
    }
    .info-warp{
        background: #fff;
        border-radius: 5px;
        margin: 15px 0;
        h2{
            text-align: center;
            border-bottom: 1px solid #eee;
            padding: 10px 0;
        }
    }
    .base-info{
        padding: 15px;
        > label{
            display: flex;
            align-items: baseline;
            word-break: break-all;
            margin-bottom: 15px;
            >div:first-child{
                flex-shrink: 0;
                color: #7f7f7f;
            }
        }
        .color_orange{
            color:#f59a23
        }
    }
    .bottom-btns{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 56px;
        width: 100%;
        background: #fff;
        border-top: 1px solid #eee;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        .btn{
            background: #f59a23;
        }
    }
    .btn{
        display: inline-block;
        width: 90%;
        padding: 8px 0;
        text-align: center;
        color:#fff;
        background: #075ebb;
        border-radius: 20px;
    }
    .btns{
        text-align: center;
        // margin-top: 20px;
        .btn{
            width: 95%;
            background: #075ebb;
        }
    }
    .color_red {
        color: #d9001b
    }
    .color_green{
        color:#70b603
    }
</style>
